<template>
  <div class="space-detail"
       v-if="isShow">
    <div class="space-detail-header">
      <div class="header-content">
        <span class="header-content-name">{{space.name}}</span>
        <span class="header-content-info">共({{space.info}})层</span>
      </div>
      <div class="close"
           @click="closeDetail"></div>
    </div>
    <div class="space-detail-body">
      <div class="space-detail-content"
           v-for="(item,index) in underGroundData"
           v-if="index<2"
           @click="show_underImg">
        <div class="content-left">
          <div class="content-left-top">
            <div class="content-image"
                 :style="{ 'background-image': 'url(' + item.angleImg + ')','background-repeat':'no-repeat','background-size':'cover' }">
              <!-- <img :src="item.angleImg" alt /> -->
              <img style="display:none"
                   src="../../static/image/1/oneFloor_angle.jpg"
                   alt="">
              <img style="display:none"
                   src="../../static/image/1/twoFloor_angle.jpg"
                   alt="">

            </div>
            <div class="content-floor">{{item.floor}}</div>
          </div>

          <div class="content-left-bottom">
            <div class="icon1">{{item.monitor}}</div>
            <div class="icon2">{{item.water}}</div>
            <div class="icon3">{{item.temperature}}</div>
            <div class="icon4">{{item.air}}</div>
            <div class="icon5">{{item.smoke}}</div>
          </div>
        </div>
        <div class="content-right">
          <div class="content-right-top">面积：{{item.square}}平方米</div>
          <div class="content-right-bottom">
            <div class="content-right-leftInfo">
              <div>
                <span>规划用途</span>
                <span>{{item.use}}</span>
              </div>
              <div>
                <span>设施总数</span>
                <span>{{item.facilityNumber}}</span>
              </div>
              <div>
                <span>设施类型</span>
                <span>{{item.facilityType}}</span>
              </div>
              <div>
                <span>权属单位</span>
                <span>{{item.organization}}</span>
              </div>
            </div>
            <div class="content-right-rightInfo">
              <div>
                <span>人流量</span>
                <span>{{item.huamnTraffic}} / {{item.baseHuman}}</span>
              </div>
              <div>
                <span>停车位</span>
                <span>{{item.parkingSpace}} / {{item.baseParkingSpace}}</span>
              </div>
              <div>
                <span>环境</span>
                <span>{{item.environment}}</span>
              </div>
              <div>
                <span>温湿度</span>
                <span>{{item.humiture}}</span>
              </div>
            </div>
          </div>
        </div>
        <div class="content-right-more"></div>
      </div>
    </div>
    <!-- 模态框 -->
    <div class="underImg_outBox">
      <div class="underImg">
        <!-- 内容头部 -->
        <div class="underImg_header">
          <span class="underImg_header_name">新街口地下广场</span>
          <span class="underImg_header_floor">（共五层）</span>
          <div class="underImg_header_close"
               @click="close_underImg"></div>
        </div>
        <!-- content -->
        <div class="underImgContent">
          <!-- 内容左边 -->
          <div class="underImgContent_left">
            <ul class="underImgContent_left_ul">
              <li class="cli_xjk_detail_floor1"
                  id="floor1_button">
                <div class="underImgContent_left_floor">
                  <i class="bold_floor">U1</i>
                  <i class="floor_name">地下交通设施</i>
                  <p class="">
                    <span>3</span>
                  </p>
                  <!-- <img class="" src="" alt=""> -->
                </div>
              </li>
              <li class="xjk_detail_floor2 floor2_button">
                <div class="underImgContent_left_floor">
                  <i class="bold_floor">U2</i>
                  <i class="floor_name">地下交通设施</i>
                  <!-- <img class="" src="../../static/image/1/angleImg2.png" alt=""> -->
                </div>
              </li>
            </ul>
          </div>
          <!-- 内容中间 -->
          <div class="underImgContent_middle1">
            <!-- 标出的icon -->
            <div class="showIcon_floor1">
              <!-- 监控七个 -->
              <div class="jk_icon">
                <img src="../../static/image/1/jk_icon.png">
                <img src="../../static/image/1/jk_icon.png">
                <img src="../../static/image/1/jk_icon.png">
                <img src="../../static/image/1/jk_icon.png">
                <img src="../../static/image/1/jk_icon.png">
                <img src="../../static/image/1/jk_icon.png">
                <img src="../../static/image/1/jk_icon.png">
              </div>
              <!-- 水浸两个 -->
              <div class="sj_icon">
                <img src="../../static/image/1/sj_icon.png">
                <img src="../../static/image/1/sj_icon.png">
              </div>
              <!-- 温湿度13个 -->
              <div class="wsd_icon">
                <img src="../../static/image/1/wsd_icon.png">
                <img src="../../static/image/1/wsd_icon.png">
                <img src="../../static/image/1/wsd_icon.png">
                <img src="../../static/image/1/wsd_icon.png">
                <img src="../../static/image/1/wsd_icon.png">
                <img src="../../static/image/1/wsd_icon.png">
                <img src="../../static/image/1/wsd_icon.png">
                <img src="../../static/image/1/wsd_icon.png">
                <img src="../../static/image/1/wsd_icon.png">
                <img src="../../static/image/1/wsd_icon.png">
                <img src="../../static/image/1/wsd_icon.png">
                <img src="../../static/image/1/wsd_icon.png">
                <img src="../../static/image/1/wsd_icon.png">
              </div>

              <!-- 空气三个 -->
              <div class="kq_icon">
                <img src="../../static/image/1/kq_icon.png">
                <img src="../../static/image/1/kq_icon.png">
                <img src="../../static/image/1/kq_icon.png">
              </div>

              <!-- 烟火26？？ -->
              <div class="yh_icon">
                <img src="../../static/image/1/yh_icon.png">
                <img src="../../static/image/1/yh_icon.png">
                <img src="../../static/image/1/yh_icon.png">
                <img src="../../static/image/1/yh_icon.png">
                <img src="../../static/image/1/yh_icon.png">
                <img src="../../static/image/1/yh_icon.png">
              </div>

              <!-- 报警icon -->
              <div class="warning_icon">
                <img src="../../static/image/1/kqwr_warning.png">
                <img src="../../static/image/1/sj_warning.png">
                <img src="../../static/image/1/wd_warning.png">

              </div>

              <!-- 底部图标个数显示 -->
              <ul class="icon_number">
                <li>
                  <img src="../../static/image/1/jk_icon.png">
                  <p>7</p>
                  <span>监控</span>
                </li>
                <li>
                  <img src="../../static/image/1/sj_icon.png">
                  <p>2</p>
                  <span>水浸</span>
                </li>
                <li>
                  <img src="../../static/image/1/wsd_icon.png">
                  <p>13</p>
                  <span>温湿度</span>
                </li>
                <li>
                  <img src="../../static/image/1/kq_icon.png">
                  <p>3</p>
                  <span>空气</span>
                </li>
                <li>
                  <img src="../../static/image/1/yh_icon.png">
                  <p>6</p>
                  <span>烟火</span>
                </li>
              </ul>
            </div>

          </div>
          <!-- 内容右边 -->
          <div class="underImgContent_right">
            <div class="rightInformation_title">
              <span>地下一层</span>
              <i>（435平方米）</i>
            </div>
            <!-- 最右侧点击事件 -->

            <ul class="rightInformation_button">
              <li>基本信息</li>
              <li>人流分析</li>
              <li>车流分析</li>
              <li>事件分析</li>
            </ul>
            <!-- 右侧信息展示 -->
            <ul class="rightInformation_one">
              <li>
                <i>规划用途</i>
                <span>地下交通设施</span>
              </li>
              <li>
                <i>设施总数</i>
                <span>4</span>
              </li>
              <li>
                <i>主要设施类型</i>
                <span>车站地层</span>
              </li>
              <li>
                <i>权属单位</i>
                <span>南京市人防</span>
              </li>
            </ul>
            <ul class="rightInformation_two">
              <li>
                <i>人流量</i>
                <p>
                  <span>4381</span>人
                  <em>额定3500人</em>
                  <img src="../../static/image/1/warning_icon.png"
                       alt="">
                </p>
              </li>
              <li>
                <i>停车位</i>
                <p>
                  <span>剩余289</span>
                  <em>共计500辆</em>
                </p>
              </li>
              <li>
                <i>温湿度</i>
                <p>
                  <span>25.4℃</span>
                  <em>23%</em>
                  <img src="../../static/image/1/warning_icon.png"
                       alt="">
                </p>

              </li>
            </ul>
            <ul class="rightInformation_three">
              <li>
                <i>CO</i>
                <p>
                  监测点<span>01</span>浓度高9%
                  <img src="../../static/image/1/warning_icon.png"
                       alt="">
                </p>
              </li>
              <li>
                <i>O₂</i>
                <p>3个监测点均为正常</p>
              </li>
              <li>
                <i>CO₂</i>
                <p>3个监测点均为正常</p>
              </li>
              <li>
                <i>PM10</i>
                <p>3个监测点均为正常</p>
              </li>
            </ul>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import Bus from "../utils/bus.js";
export default {
  name: "space-detail",
  components: {},
  data () {
    return {
      isShow: false,
      space: {},
      underGroundData: [],
      moreFloor: [],
      cli_underImg_leftBg: [
        "../../static/image/1/cli_angleImg1.png",
        "../../static/image/1/cli_angleImg2.png"
      ],
      // mock的城市数据
      cityData: [
        {
          space: {
            name: "新街口-鼓楼中心",
            info: 5
          },
          underGroundData: [
            {
              angleImg: "img/oneFloor_angle.a2622173.jpg",
              underImg_leftBg: "../../static/image/1/angleImg1.png",
              floor: "U1",
              imgUrl: "",
              monitor: 7,
              water: 2,
              temperature: 13,
              air: 2,
              smoke: 3,
              square: "435",
              use: "停车场",
              facilityNumber: 4,
              facilityType: "车站地层",
              organization: "南京人防",
              baseHuman: 3500,
              humanTraffic: 4381,
              baseParkingSpace: 500,
              parkingSpace: 283,
              environment: "co2浓度高9%",
              humiture: "25.4℃   23%"
            },
            {
              angleImg: "img/twoFloor_angle.9c46a836.jpg",
              underImg_leftBg: "../../static/image/1/angleImg2.png",
              floor: "U2",
              imgUrl: "",
              monitor: 7,
              water: 2,
              temperature: 13,
              air: 2,
              smoke: 3,
              imgUrl: "",
              square: "435",
              use: "停车场",
              facilityNumber: 4,
              facilityType: "车站地层",
              organization: "南京人防",
              baseHuman: 3500,
              humanTraffic: 4381,
              baseParkingSpace: 500,
              parkingSpace: 283,
              environment: "co2浓度高9%",
              humiture: "25.4℃   23%"
            },
            {
              floor: "U3",
              imgUrl: "",
              monitor: 7,
              water: 2,
              temperature: 13,
              air: 2,
              smoke: 3,
              imgUrl: "",
              square: "435",
              use: "停车场",
              facilityNumber: 4,
              facilityType: "车站地层",
              organization: "南京人防",
              baseHuman: 3500,
              humanTraffic: 4381,
              baseParkingSpace: 500,
              parkingSpace: 283,
              environment: "co2浓度高9%",
              humiture: "25.4℃   23%"
            },
            {
              floor: "U4",
              imgUrl: "",
              monitor: 7,
              water: 2,
              temperature: 13,
              air: 2,
              smoke: 3,
              imgUrl: "",
              square: "435",
              use: "停车场",
              facilityNumber: 4,
              facilityType: "车站地层",
              organization: "南京人防",
              baseHuman: 3500,
              humanTraffic: 4381,
              baseParkingSpace: 500,
              parkingSpace: 283,
              environment: "co2浓度高9%",
              humiture: "25.4℃   23%"
            },
            {
              floor: "U5",
              imgUrl: "",
              monitor: 7,
              water: 2,
              temperature: 13,
              air: 2,
              smoke: 3,
              imgUrl: "",
              square: "435",
              use: "停车场",
              facilityNumber: 4,
              facilityType: "车站地层",
              organization: "南京人防",
              baseHuman: 3500,
              humanTraffic: 4381,
              baseParkingSpace: 500,
              parkingSpace: 283,
              environment: "co2浓度高9%",
              humiture: "25.4℃   23%"
            }
          ]
        },
        {
          space: {
            name: "夫子庙",
            info: 3
          },
          underGroundData: [
            {
              angleImg: "img/oneFloor_angle.a2622173.jpg",
              underImg_leftBg: "img/angleImg1.8ac787fa.png",
              floor: "U1",
              imgUrl: "",
              monitor: 7,
              water: 2,
              temperature: 13,
              air: 2,
              smoke: 3,
              square: "435",
              use: "停车场",
              facilityNumber: 4,
              facilityType: "车站地层",
              organization: "南京人防",
              baseHuman: 3500,
              humanTraffic: 4381,
              baseParkingSpace: 500,
              parkingSpace: 283,
              environment: "co2浓度高9%",
              humiture: "25.4℃   23%"
            },
            {
              angleImg: "img/twoFloor_angle.9c46a836.jpg",
              underImg_leftBg: "img/angleImg2.8c6db836.png",
              floor: "U2",
              imgUrl: "",
              monitor: 7,
              water: 2,
              temperature: 13,
              air: 2,
              smoke: 3,
              imgUrl: "",
              square: "435",
              use: "停车场",
              facilityNumber: 4,
              facilityType: "车站地层",
              organization: "南京人防",
              baseHuman: 3500,
              humanTraffic: 4381,
              baseParkingSpace: 500,
              parkingSpace: 283,
              environment: "co2浓度高9%",
              humiture: "25.4℃   23%"
            },
            {
              floor: "U3",
              imgUrl: "",
              monitor: 7,
              water: 2,
              temperature: 13,
              air: 2,
              smoke: 3,
              imgUrl: "",
              square: "435",
              use: "停车场",
              facilityNumber: 4,
              facilityType: "车站地层",
              organization: "南京人防",
              baseHuman: 3500,
              humanTraffic: 4381,
              baseParkingSpace: 500,
              parkingSpace: 283,
              environment: "co2浓度高9%",
              humiture: "25.4℃   23%"
            }
          ]
        },
        {
          space: {
            name: "湖南路",
            info: 3
          },
          underGroundData: [
            {
              angleImg: "img/oneFloor_angle.a2622173.jpg",
              underImg_leftBg: "img/angleImg1.8ac787fa.png",
              floor: "U1",
              imgUrl: "",
              monitor: 7,
              water: 2,
              temperature: 13,
              air: 2,
              smoke: 3,
              square: "435",
              use: "停车场",
              facilityNumber: 4,
              facilityType: "车站地层",
              organization: "南京人防",
              baseHuman: 3500,
              humanTraffic: 4381,
              baseParkingSpace: 500,
              parkingSpace: 283,
              environment: "co2浓度高9%",
              humiture: "25.4℃   23%",
              alert: 2
            },
            {
              angleImg: "img/twoFloor_angle.9c46a836.jpg",
              underImg_leftBg: "img/angleImg2.8c6db836.png",
              floor: "U2",
              imgUrl: "",
              monitor: 7,
              water: 2,
              temperature: 13,
              air: 2,
              smoke: 3,
              imgUrl: "",
              square: "435",
              use: "停车场",
              facilityNumber: 4,
              facilityType: "车站地层",
              organization: "南京人防",
              baseHuman: 3500,
              humanTraffic: 4381,
              baseParkingSpace: 500,
              parkingSpace: 283,
              environment: "co2浓度高9%",
              humiture: "25.4℃   23%",
              alert: 2
            },
            {
              floor: "U3",
              imgUrl: "",
              monitor: 7,
              water: 2,
              temperature: 13,
              air: 2,
              smoke: 3,
              imgUrl: "",
              square: "435",
              use: "停车场",
              facilityNumber: 4,
              facilityType: "车站地层",
              organization: "南京人防",
              baseHuman: 3500,
              humanTraffic: 4381,
              baseParkingSpace: 500,
              parkingSpace: 283,
              environment: "co2浓度高9%",
              humiture: "25.4℃   23%",
              alert: 3
            }
          ]
        }
      ]
    };
  },

  beforeMount () {
    Bus.$on("showUnderground", e => {
      // e是地图传过来的参数，在这里可以进行加工
      const mapdata = e.graphic;
      const spaceName = mapdata.attributes.Name;
      // console.log(spaceName)
      for (let i = 0; i < this.cityData.length; i++) {
        if (spaceName === this.cityData[i].space.name) {
          this.isShow = true;
          this.underGroundData = this.cityData[i].underGroundData;
          this.space = this.cityData[i].space;
          return;
        } else {
          // this.$alert('抱歉，暂无数据', {
          //   confirmButtonText: '确定',          })
          // this.$message({
          //   message: '抱歉，暂无数据',
          //   type: 'error'
          // });
        }
      }
    });
  },
  mounted () {
    // console.log(this.underGroundData.length);
    const num = this.underGroundData.length - 3;
    if (num > 0) {
      for (let i = 1; i <= num; i++) {
        let j = 3 + i;
        this.moreFloor.push(j);
      }
      return this.moreFloor;
    }
    // this.scroll=new Bscroll(this.$refs.wrapper, { mouseWheel: true, click: true, tap: true })
    // debugger;
    // if (show_underImg()) {
    //   console.log("start");
    // }

  },
  methods: {
    closeDetail () {
      this.isShow = false;
    },
    show_underImg () {
      $(".underImg_outBox").show();
      // 点击左边选择楼层正面图
      $(".xjk_detail_floor2").click(function () {
        $(this).attr("class", "cli_xjk_detail_floor2");
        $(".cli_xjk_detail_floor1").attr("class", "xjk_detail_floor1");
        $(".underImgContent_middle1").attr("class", "underImgContent_middle2");
        $('.showIcon_floor1').hide()
        $(".xjk_detail_floor1").click(function () {
          $(this).attr("class", "cli_xjk_detail_floor1");
          $(".cli_xjk_detail_floor2").attr("class", "xjk_detail_floor2");
          $(".underImgContent_middle2").attr(
            "class",
            "underImgContent_middle1"
          );
          $('.showIcon_floor1').show()
        });
      });
      $(".xjk_detail_floor1").click(function () {
        $(this).attr("class", "cli_xjk_detail_floor1");
        $(".cli_xjk_detail_floor2").attr("class", "xjk_detail_floor2");
        $(".underImgContent_middle2").attr("class", "underImgContent_middle1");
        $('.showIcon_floor1').show()
      });
      $(".rightInformation_button li").click(function () {
        $(this)
          .css({
            "background-image":
              "linear-gradient(to bottom,rgba(15,61,94,1),rgba(1,160,166,.8))",
            color: "rgb(67, 254, 247)"
          })
          .siblings()
          .css({ 'background-image': 'linear-gradient(to bottom,rgba(1, 160, 166, 0.5),rgba(15, 61, 94, 0.5),rgba(1, 160, 166, 0.5))', 'color': 'rgb(90, 139, 182)' })

      });
    },
    close_underImg () {
      $(".underImg_outBox").hide();
    }
  }
};
</script>
<style lang="scss">
$precent: 100vw / 1920;
@keyframes go {
  0% {
    opacity: 0;
  }
  50% {
    opacity: 100;
  }
  100% {
    opacity: 0;
  }
}

.space-detail {
  padding: 4 * $precent 0 * $precent 13 * $precent 14 * $precent;
  width: 750 * $precent;
  background: url("../../static/image/1/详情大背景.png") no-repeat;
  background-size: 100% 100%;
  .space-detail-header {
    width: 737 * $precent;
    height: 48 * $precent;
    background: url("../../static/image/1/详情头部.png") no-repeat;
    background-size: 100% 100%;
    position: relative;
    .header-content {
      width: 737 * $precent;
      height: 48 * $precent;
      line-height: 48 * $precent;
      text-align: left;
      margin-left: 50 * $precent;
      .header-content-name {
        font-size: 20 * $precent;
        color: #00d5fc;
      }
      .header-content-info {
        margin-left: 15 * $precent;
        font-size: 15 * $precent;
        color: #b1cecf;
      }
    }
    .close {
      right: 10 * $precent;
      top: 10 * $precent;
      position: absolute;
      width: 25 * $precent;
      height: 25 * $precent;
      background: url("../../static/image/1/关闭.png") no-repeat;
      background-size: 100% 100%;
    }
  }
  .space-detail-body {
    .space-detail-content {
      position: relative;
      width: 735 * $precent;
      height: 220 * $precent;
      display: flex;
      flex-direction: row;
      justify-content: space-between;
      align-items: center;
      background: url("../../static/image/1/详情背景.png") no-repeat;
      background-size: 100% 100%;
      .content-left {
        .content-left-top {
          width: 400 * $precent;
          height: 160 * $precent;
          position: relative;
          .content-image {
            position: absolute;
            top: 15 * $precent;
            width: 277 * $precent;
            height: 141 * $precent;
            // background: url("../../static/image/1/oneFloor_angle.jpg") no-repeat;
            // background-size: 100% 100%;
            img {
              height: 100%;
            }
          }

          .content-floor {
            position: absolute;
            top: 10 * $precent;
            right: -4 * $precent;
            line-height: 45 * $precent;
            font-size: 24 * $precent;
            width: 115 * $precent;
            height: 45 * $precent;
            background: url("../../static/image/1/楼层背景.png") no-repeat;
            background-size: 100% 100%;
          }
        }

        .content-left-bottom {
          margin-left: 10 * $precent;
          height: 40 * $precent;
          display: flex;
          flex-direction: row;
          justify-content: flex-start;
          align-items: center;
          > div {
            width: 43 * $precent;
            height: 20 * $precent;
            line-height: 20 * $precent;
            text-align: right;
            padding-right: 6 * $precent;
            box-sizing: border-box;
            font-size: 12 * $precent;
            margin-right: 18 * $precent;
          }
          .icon1 {
            background: url("../../static/image/1/监控.png") no-repeat;
            background-size: 100% 100%;
          }
          .icon2 {
            width: 43 * $precent;
            height: 20 * $precent;
            background: url("../../static/image/1/水.png") no-repeat;
            background-size: 100% 100%;
          }
          .icon3 {
            width: 43 * $precent;
            height: 20 * $precent;
            background: url("../../static/image/1/温度.png") no-repeat;
            background-size: 100% 100%;
          }
          .icon4 {
            width: 43 * $precent;
            height: 20 * $precent;
            background: url("../../static/image/1/环境.png") no-repeat;
            background-size: 100% 100%;
          }
          .icon5 {
            width: 43 * $precent;
            height: 20 * $precent;
            background: url("../../static/image/1/烟雾.png") no-repeat;
            background-size: 100% 100%;
          }
        }
      }
      .content-right {
        position: relative;
        .content-right-top {
          position: absolute;
          top: 25 * $precent;
          left: 0 * $precent;
          width: 175 * $precent;
          height: 21 * $precent;
          padding-left: 15 * $precent;
          background: url("../../static/image/1/面积背景.png") no-repeat;
          background-size: 100% 100%;
        }
        .content-right-bottom {
          width: 400 * $precent;
          height: 200 * $precent;
          position: relative;
          bottom: 0;
          left: -10 * $precent;
          display: flex;
          flex-direction: row;
          justify-content: space-around;
          align-items: center;
          .content-right-leftInfo {
            width: 400 * $precent;
            height: 200 * $precent;
            position: relative;
            > div {
              width: 170 * $precent;
              height: 20 * $precent;
              line-height: 20 * $precent;
              text-align: left;
              background: url("../../static/image/1/信息栏1.png") no-repeat;
              background-size: 100% 100%;
              display: flex;
              justify-content: center;
              flex-direction: row;
              align-items: center;
              margin-bottom: 10 * $precent;
              position: absolute;
              > span {
                font-size: 10 * $precent;
                width: 85 * $precent;
                flex: 1;
                text-align: center;
              }
            }
            > div:nth-child(1) {
              left: -12 * $precent;
              bottom: 100 * $precent;
            }
            > div:nth-child(2) {
              left: -30 * $precent;
              bottom: 70 * $precent;
            }
            > div:nth-child(3) {
              left: -48 * $precent;
              bottom: 40 * $precent;
            }
            > div:nth-child(4) {
              left: -66 * $precent;
              bottom: 10 * $precent;
            }
          }
          .content-right-rightInfo {
            margin-left: -30 * $precent;
            width: 400 * $precent;
            height: 200 * $precent;
            position: relative;
            > div {
              width: 190 * $precent;
              height: 20 * $precent;
              line-height: 20 * $precent;
              text-align: left;
              display: flex;
              justify-content: center;
              flex-direction: row;
              align-items: center;
              margin-bottom: 10 * $precent;
              position: absolute;
              > span {
                width: 95 * $precent;
                font-size: 10 * $precent;
                flex: 1;
                text-align: center;
              }
              > span:nth-child(1) {
                margin-left: 14 * $precent;
              }
              > span:nth-child(2) {
                padding-right: 5 * $precent;
              }
            }
            > div:nth-child(1) {
              background: url("../../static/image/1/信息栏人流.png") no-repeat;
              background-size: 100% 100%;
              left: -35 * $precent;
              bottom: 100 * $precent;
            }
            > div:nth-child(2) {
              background: url("../../static/image/1/信息栏车位.png") no-repeat;
              background-size: 100% 100%;
              left: -50 * $precent;
              bottom: 70 * $precent;
            }
            > div:nth-child(3) {
              background: url("../../static/image/1/信息栏环境.png") no-repeat;
              background-size: 100% 100%;
              left: -65 * $precent;
              bottom: 40 * $precent;
            }
            > div:nth-child(4) {
              background: url("../../static/image/1/信息栏温湿度.png") no-repeat;
              background-size: 100% 100%;
              left: -80 * $precent;
              bottom: 10 * $precent;
            }
          }
        }
      }
      .content-right-more {
        position: absolute;
        right: 5 * $precent;
        bottom: 5 * $precent;
        height: 16 * $precent;
        width: 16 * $precent;
        background: url("../../static/image/1/详情.png") no-repeat;
        background-size: 100% 100%;
      }
    }
    .space-detail-content-more {
      width: 735 * $precent;
      height: 70 * $precent;
      margin-top: -2 * $precent;
      background: url("../../static/image/1/更多楼层.png") no-repeat;
      background-size: 100% 100%;
      display: flex;
      justify-content: left;
      align-items: center;
      > div {
        width: 200 * $precent;
        height: 46 * $precent;
        line-height: 46 * $precent;
        text-align: center;
        font-size: 20 * $precent;
        background: url("../../static/image/1/简略楼层.png") no-repeat;
        background-size: 100% 100%;
      }
    }
  }
  .underImg_outBox {
    width: 1920 * $precent;
    height: 1080 * $precent;
    display: none;
    background: rgba(0, 0, 0, 0.4);
    position: absolute;
    top: -184 * $precent;
    left: -578 * $precent;
    .underImg {
      position: absolute;
      top: 160 * $precent;
      left: 230 * $precent;
      border-radius: 5 * $precent;
      // transform: translateX(50%);
      width: 1460 * $precent;
      height: 800 * $precent;
      background: url("../../static/image/1/underImgBg.png") no-repeat;
      background-size: 100%;

      .underImg_header {
        border-radius: 5 * $precent 5 * $precent 0 0;
        width: 100%;
        height: 46 * $precent;
        line-height: 46 * $precent;
        background-image: linear-gradient(
          to right,
          rgb(1, 15, 76),
          rgb(8, 45, 113)
        );
        span {
          display: inline-block;
          float: left;
          line-height: 46 * $precent;
        }
        .underImg_header_name {
          font-size: 16 * $precent;
          color: #00d5fc;
          margin-left: 20 * $precent;
        }
        .underImg_header_floor {
          font-size: 12 * $precent;
          color: #b1cecf;
        }
        .underImg_header_close {
          right: 15 * $precent;
          top: 12 * $precent;
          position: absolute;
          width: 20 * $precent;
          height: 20 * $precent;
          background: url("../../static/image/1/关闭.png") no-repeat;
          background-size: 100% 100%;
        }
      }
      .underImgContent {
        width: 100%;
        height: 754 * $precent;
        display: flex;
        .underImgContent_left {
          width: 288 * $precent;
          height: 100%;
          .underImgContent_left_ul {
            width: 99%;
            height: 100%;
            border: 0.5 * $precent solid rgb(54, 88, 151);

            li {
              width: 100%;
              height: 154 * $precent;
              border: 0.5 * $precent solid rgb(54, 88, 151);
              // margin-left: 11*$precent;
              .underImgContent_left_floor {
                width: 60%;
                height: 30 * $precent;
                margin-top: 9 * $precent;
                background-image: linear-gradient(
                  to right,
                  rgba(15, 103, 117, 1),
                  rgba(0, 0, 0, 0)
                );

                i {
                  margin-left: 10 * $precent;
                  line-height: 30 * $precent;
                }
                .bold_floor {
                  font-weight: 900;
                }
                .floor_name {
                  color: rgb(155, 188, 221);
                }
              }
            }
            #floor1_button {
              position: relative;
              p {
                display: inline-block;
                width: 60 * $precent;
                height: 25 * $precent;
                // border:1*$precent solid;
                background: url("../../static/image/1/warning_left.png");
                background-size: cover;
                position: absolute;
                right: 0;
                bottom: 0;
                span {
                  color: red;
                  font-weight: 900;
                  margin-left: 35 * $precent;
                  line-height: 25 * $precent;
                }
              }
            }
            .floor2_button {
              img {
                width: 50%;
              }
            }
            .xjk_detail_floor1 {
              background: url("../../static/image/1/angleImg1.png") no-repeat;
              background-size: cover;
            }
            .cli_xjk_detail_floor1 {
              background: url("../../static/image/1/cli_angleImg1.png")
                no-repeat;
              background-size: cover;
            }
            .xjk_detail_floor2 {
              background: url("../../static/image/1/angleImg2.png") no-repeat;
              background-size: cover;
            }
            .cli_xjk_detail_floor2 {
              background: url("../../static/image/1/cli_angleImg2.png")
                no-repeat;
              background-size: cover;
            }
          }
        }
        .underImgContent_middle1 {
          background: url("../../static/image/1/xjk_imgContent_middle1.png")
            no-repeat;
          background-size: 100%;
          width: 772 * $precent;
          height: 100%;
          .showIcon_floor1 {
            width: 100%;
            height: 100%;
            position: relative;
            // border: 1*$precent solid;
            img {
              width: 20 * $precent;
              position: absolute;
            }
            .jk_icon {
              img:nth-child(1) {
                top: 590 * $precent;
                left: 110 * $precent;
              }
              img:nth-child(2) {
                top: 320 * $precent;
                left: 460 * $precent;
              }
              img:nth-child(3) {
                top: 510 * $precent;
                left: 400 * $precent;
              }
              img:nth-child(4) {
                top: 410 * $precent;
                left: 480 * $precent;
              }
              img:nth-child(5) {
                top: 250 * $precent;
                left: 500 * $precent;
              }
              img:nth-child(6) {
                top: 250 * $precent;
                left: 600 * $precent;
              }
              img:nth-child(7) {
                top: 600 * $precent;
                left: 670 * $precent;
              }
            }
            .sj_icon {
              img:nth-child(1) {
                top: 410 * $precent;
                left: 400 * $precent;
              }
              img:nth-child(2) {
                top: 570 * $precent;
                left: 200 * $precent;
              }
            }
            .wsd_icon {
              img:nth-child(1) {
                top: 200 * $precent;
                left: 450 * $precent;
              }
              img:nth-child(2) {
                top: 410 * $precent;
                left: 350 * $precent;
              }
              img:nth-child(3) {
                top: 410 * $precent;
                left: 300 * $precent;
              }
              img:nth-child(4) {
                top: 410 * $precent;
                left: 500 * $precent;
              }
              img:nth-child(5) {
                top: 410 * $precent;
                left: 260 * $precent;
              }
              img:nth-child(6) {
                top: 510 * $precent;
                left: 100 * $precent;
              }
              img:nth-child(7) {
                top: 510 * $precent;
                left: 250 * $precent;
              }
              img:nth-child(8) {
                top: 490 * $precent;
                left: 300 * $precent;
              }
              img:nth-child(9) {
                top: 210 * $precent;
                left: 600 * $precent;
              }
              img:nth-child(10) {
                top: 440 * $precent;
                left: 460 * $precent;
              }
              img:nth-child(11) {
                top: 480 * $precent;
                left: 200 * $precent;
              }
              img:nth-child(12) {
                top: 310 * $precent;
                left: 360 * $precent;
              }
              img:nth-child(13) {
                top: 570 * $precent;
                left: 310 * $precent;
              }
            }
            .kq_icon {
              img:nth-child(1) {
                top: 300 * $precent;
                left: 390 * $precent;
              }
              img:nth-child(2) {
                top: 500 * $precent;
                left: 350 * $precent;
              }
              img:nth-child(3) {
                top: 420 * $precent;
                left: 380 * $precent;
              }
            }
            .yh_icon {
              img:nth-child(1) {
                top: 300 * $precent;
                left: 440 * $precent;
              }
              img:nth-child(2) {
                top: 330 * $precent;
                left: 430 * $precent;
              }
              img:nth-child(3) {
                top: 480 * $precent;
                left: 470 * $precent;
              }
              img:nth-child(4) {
                top: 550 * $precent;
                left: 400 * $precent;
              }
              img:nth-child(5) {
                top: 580 * $precent;
                left: 410 * $precent;
              }
              img:nth-child(6) {
                top: 450 * $precent;
                left: 500 * $precent;
              }
            }
            .warning_icon {
              animation: go 2s infinite;
              img {
                width: 150 * $precent;
              }
              img:nth-child(1) {
                top: 350 * $precent;
                left: 300 * $precent;
              }
              img:nth-child(2) {
                top: 500 * $precent;
                left: 100 * $precent;
              }
              img:nth-child(3) {
                top: 400 * $precent;
                left: 450 * $precent;
              }
            }

            .icon_number {
              width: 400 * $precent;
              height: 40 * $precent;
              position: absolute;
              bottom: 13.5 * $precent;
              left: 35 * $precent;
              li {
                width: 50 * $precent;
                height: 20 * $precent;
                // border: 1*$precent solid;
                border-radius: 25 * $precent;
                line-height: 20 * $precent;
                position: relative;
                float: left;
                background: rgba(0, 0, 0, 0.3);
                margin-left: 15 * $precent;
                img {
                  left: 0;
                  top: 0;
                }
                p {
                  color: #fff;
                  font-size: 14 * $precent;
                  font-weight: 900;
                  margin-left: 15 * $precent;
                }
                span {
                  font-size: 12 * $precent;
                  color: #aaa;
                }
              }
            }
          }
          .showIcon_floor2 {
          }
        }
        .underImgContent_middle2 {
          background: url("../../static/image/1/xjk_imgContent_middle2.png")
            no-repeat;
          background-size: 100%;
          width: 771.5 * $precent;
          height: 100%;
        }
        .underImgContent_right {
          width: 400 * $precent;
          height: 100%;
          border-radius: 0 0 5 * $precent 0;
          background-image: linear-gradient(
            to right bottom,
            rgba(0, 12, 64, 0.8),
            rgba(13, 122, 99, 0.8)
          );
          .rightInformation_title {
            width: 90%;
            height: 40 * $precent;
            margin-left: 10 * $precent;
            // border: 1*$precent solid ;
            line-height: 40 * $precent;
            margin-top: 30 * $precent;
            background: url("../../static/image/1/rightInformation_title.png");
            background-size: cover;
            span {
              font-size: 22 * $precent;
              color: rgb(50, 209, 215);
              margin-left: -50 * $precent;
            }
            i {
              color: rgb(67, 116, 185);
            }
          }
          .rightInformation_button {
            width: 90%;
            display: flex;
            height: 26 * $precent;
            margin-top: 16 * $precent;
            li {
              // border:1*$precent solid blue;
              flex: 1;
              line-height: 26 * $precent;
              background-image: linear-gradient(
                to bottom,
                rgba(1, 160, 166, 0.5),
                rgba(15, 61, 94, 0.5),
                rgba(1, 160, 166, 0.5)
              );
              color: rgb(90, 139, 182);
              font-size: 14 * $precent;
              cursor: pointer;
            }
            li:nth-child(1) {
              border-radius: 5 * $precent 0 0 5 * $precent;
              border-right: 0.5 * $precent solid rgba(65, 139, 174, 0.8);
              background-image: linear-gradient(
                to bottom,
                rgba(15, 61, 94, 1),
                rgba(1, 160, 166, 0.8)
              );
              color: rgb(67, 254, 247);
            }
            li:nth-child(2) {
              border-right: 0.5 * $precent solid rgba(65, 139, 174, 1);
            }
            li:nth-child(3) {
              border-right: 0.5 * $precent solid rgba(65, 139, 174, 1);
            }
            li:nth-child(4) {
              border-radius: 0 5 * $precent 5 * $precent 0;
            }
            // rgba(74,91,119.5),rgba(15,61,94,.5),rgba(1,106,125,.5)
          }
          ul {
            width: 90%;
            // border: 1*$precent solid;
            margin: 0 auto;
          }
          // ul li{
          //   list-style: none;
          //   float: left;
          //   width: 90%;
          // }
          .rightInformation_one,
          .rightInformation_two,
          .rightInformation_three {
            margin-top: 25 * $precent;
            border-radius: 5 * $precent;
            li {
              width: 100%;
              height: 22 * $precent;
              line-height: 22 * $precent;
              list-style: none;
              // border: 1*$precent solid red;
              margin-top: 16 * $precent;
              font-size: 12 * $precent;
            }
          }
          .rightInformation_one {
            margin-top: 39 * $precent;
            li {
              background: url("../../static/image/1/kuang_blue.png") no-repeat;
              background-size: 100% 101%;
              i {
                // margin-left: -150*$precent;
                display: inline-block;
                width: 100 * $precent;
                height: 100%;
                // border: 1*$precent solid;
                color: #ddd;
              }
              span {
                display: inline-block;
                width: 250 * $precent;
                height: 100%;
                // border: 1*$precent solid;
                font-style: italic;
                color: #ddd;
              }
            }
          }
          .rightInformation_two {
            margin-top: 31.5 * $precent;
            li {
              i {
                display: inline-block;
                color: #ddd;
                // border: 1*$precent solid;
                width: 100 * $precent;
                height: 100%;
              }

              p {
                display: inline-block;
                font-style: italic;
                color: #ddd;
                // border: 1*$precent solid;
                width: 230 * $precent;
                position: relative;
                span {
                  display: inline-block;
                  font-style: italic;
                  color: #ddd;
                  // margin-right: 20*$precent;
                }
                em {
                  display: inline-block;
                  font-style: italic;
                  color: #ddd;
                  padding-left: 20 * $precent;
                }
                img {
                  display: inline-block;
                  height: 140%;
                  position: absolute;
                  top: -5 * $precent;
                  right: 0;
                }
              }
            }
            li:nth-child(1) {
              background: url("../../static/image/1/kuang_green_rl.png")
                no-repeat;
              background-size: 100% 101%;
              p {
                span {
                  color: rgb(255, 161, 2);
                }
              }
            }
            li:nth-child(2) {
              background: url("../../static/image/1/kuang_green_tc.png")
                no-repeat;
              background-size: 100% 101%;
              p {
                span {
                  color: rgb(31, 255, 182);
                }
              }
            }
            li:nth-child(3) {
              background: url("../../static/image/1/kuang_green_sr.png")
                no-repeat;
              background-size: 100% 101%;
            }
          }
          .rightInformation_three {
            margin-top: 30 * $precent;
            li {
              background: url("../../static/image/1/kuang_yellow.png") no-repeat;
              background-size: 100% 101%;
              i {
                display: inline-block;
                color: #ddd;
                width: 100 * $precent;
                height: 100%;
              }
              p {
                display: inline-block;
                color: #ddd;
                font-style: italic;
                width: 250 * $precent;
                height: 100%;
                position: relative;
                span {
                  color: rgb(1, 191, 225);
                }
                img {
                  display: inline-block;
                  position: absolute;
                  right: 10 * $precent;
                  top: -5 * $precent;
                  height: 140%;
                }
              }
            }
          }
        }
      }
    }
  }
}
</style>